<template>
  <div class="container">
    <header>
      <van-nav-bar
        title="工程节点验收"
        left-arrow
        @click-left="$router.back()"
        @click-right="searchShow = true">
        <van-icon name="search" slot="right" size="20" />
      </van-nav-bar>
    </header>
    <div>
      <van-tabs color="#26A3FF" v-model="status">
        <van-tab title="全部" name="">
          <div @scroll.self="appendList" class="wd-scroll-body3">
            <div class="wd-pdt10 wd-pdlr15">
              <p class="wd-note-text" v-show="!all.loading && all.list.length < 1">无数据</p>
              <p class="wd-note-text" v-show="all.loading">加载中...</p>
              <van-panel @click="panelClick(item)" v-for="item in all.list" class="wd-panel" :title="'验收单号：' + item.ID" :status="item.STATUS | fStatus">
                <div class="wd-panel__body">
                  <p>
                    <span class="label">项目名称：</span>
                    <span class="value">{{item.PROJECTNAME}}</span>
                  </p>
                  <p>
                    <span class="label" v-html="'楼&emsp;&emsp;栋：'"></span>
                    <span class="value">{{item.BUILDING}}</span>
                  </p>
                  <p>
                    <span class="label">付款合同：</span>
                    <span class="value">{{item.PAYNODECODE}}</span>
                  </p>
                  <p>
                    <span class="label">支付节点：</span>
                    <span class="value">{{item.PAYNODE}}</span>
                  </p>
                </div>
                <div class="wd-panel__footer" slot="footer">
                  <span class="ysr">验收人：{{item.REVIEWNAME}}</span>
                  <span class="ysrq">验收日期：{{item.REVIEWDATE | fReviewDate}}</span>
                  <span class="del">
                    <i @click.stop="deleteNode(item.ID)" v-if="item.STATUS === '1'" class="van-icon van-icon-delete"></i>
                  </span>
                </div>
              </van-panel>
            </div>
          </div>
          <van-row class="wd-pdt10"> 
            <van-col span="18" offset="3">
              <van-button block round icon="plus" type="info" @click="$router.push('/engNodeAcpt/addmain')">新增</van-button>
            </van-col>
          </van-row>
        </van-tab>
        <van-tab title="新增" name="1">
          <div @scroll.self="appendList" class="wd-scroll-body2">
            <div class="wd-pdtb10 wd-pdlr15">
              <p class="wd-note-text" v-show="!xz.loading && xz.list.length < 1">无数据</p>
              <p class="wd-note-text" v-show="xz.loading">加载中...</p>
              <van-panel @click="panelClick(item)" v-for="item in xz.list" class="wd-panel" :title="'验收单号：' + item.ID" :status="item.STATUS | fStatus">
                <div class="wd-panel__body">
                  <p>
                    <span class="label">项目名称：</span>
                    <span class="value">{{item.PROJECTNAME}}</span>
                  </p>
                  <p>
                    <span class="label" v-html="'楼&emsp;&emsp;栋：'"></span>
                    <span class="value">{{item.BUILDING}}</span>
                  </p>
                  <p>
                    <span class="label">付款合同：</span>
                    <span class="value">{{item.PAYNODECODE}}</span>
                  </p>
                  <p>
                    <span class="label">支付节点：</span>
                    <span class="value">{{item.PAYNODE}}</span>
                  </p>
                </div>
                <div class="wd-panel__footer" slot="footer">
                  <span class="ysr">验收人：{{item.REVIEWNAME}}</span>
                  <span class="ysrq">验收日期：{{item.REVIEWDATE | fReviewDate}}</span>
                  <span class="del">
                    <i @click="deleteNode(item.ID)" v-if="item.STATUS === '1'" class="van-icon van-icon-delete"></i>
                  </span>
                </div>
              </van-panel>
            </div>
          </div>
        </van-tab>
        <van-tab title="审批不通过" name="4">
          <div @scroll.self="appendList" class="wd-scroll-body2">
            <div class="wd-pdtb10 wd-pdlr15">
              <p class="wd-note-text" v-show="!btg.loading && btg.list.length < 1">无数据</p>
              <p class="wd-note-text" v-show="btg.loading">加载中...</p>
              <van-panel @click="panelClick(item)" v-for="item in btg.list" class="wd-panel" :title="'验收单号：' + item.ID" :status="item.STATUS | fStatus">
                <div class="wd-panel__body">
                  <p>
                    <span class="label">项目名称：</span>
                    <span class="value">{{item.PROJECTNAME}}</span>
                  </p>
                  <p>
                    <span class="label" v-html="'楼&emsp;&emsp;栋：'"></span>
                    <span class="value">{{item.BUILDING}}</span>
                  </p>
                  <p>
                    <span class="label">付款合同：</span>
                    <span class="value">{{item.PAYNODECODE}}</span>
                  </p>
                  <p>
                    <span class="label">支付节点：</span>
                    <span class="value">{{item.PAYNODE}}</span>
                  </p>
                </div>
                <div class="wd-panel__footer" slot="footer">
                  <span class="ysr">验收人：{{item.REVIEWNAME}}</span>
                  <span class="ysrq">验收日期：{{item.REVIEWDATE | fReviewDate}}</span>
                  <span class="del">
                    <i @click="deleteNode(item.ID)" v-if="item.STATUS === '1'" class="van-icon van-icon-delete"></i>
                  </span>
                </div>
              </van-panel>
            </div>
          </div>
        </van-tab>
        <van-tab title="审批中" name="2">
          <div @scroll.self="appendList" class="wd-scroll-body2">
            <div class="wd-pdtb10 wd-pdlr15">
              <p class="wd-note-text" v-show="!spz.loading && spz.list.length < 1">无数据</p>
              <p class="wd-note-text" v-show="spz.loading">加载中...</p>
              <van-panel @click="panelClick(item)" v-for="item in spz.list" class="wd-panel" :title="'验收单号：' + item.ID" :status="item.STATUS | fStatus">
                <div class="wd-panel__body">
                  <p>
                    <span class="label">项目名称：</span>
                    <span class="value">{{item.PROJECTNAME}}</span>
                  </p>
                  <p>
                    <span class="label" v-html="'楼&emsp;&emsp;栋：'"></span>
                    <span class="value">{{item.BUILDING}}</span>
                  </p>
                  <p>
                    <span class="label">付款合同：</span>
                    <span class="value">{{item.PAYNODECODE}}</span>
                  </p>
                  <p>
                    <span class="label">支付节点：</span>
                    <span class="value">{{item.PAYNODE}}</span>
                  </p>
                </div>
                <div class="wd-panel__footer" slot="footer">
                  <span class="ysr">验收人：{{item.REVIEWNAME}}</span>
                  <span class="ysrq">验收日期：{{item.REVIEWDATE | fReviewDate}}</span>
                  <span class="del">
                    <i @click="deleteNode(item.ID)" v-if="item.STATUS === '1'" class="van-icon van-icon-delete"></i>
                  </span>
                </div>
              </van-panel>
            </div>
          </div>
        </van-tab>
        <van-tab title="审批通过" name="3">
          <div @scroll.self="appendList" class="wd-scroll-body2">
            <div class="wd-pdtb10 wd-pdlr15">
              <p class="wd-note-text" v-show="!sptg.loading && sptg.list.length < 1">无数据</p>
              <p class="wd-note-text" v-show="sptg.loading">加载中...</p>
              <van-panel @click="panelClick(item)" v-for="item in sptg.list" class="wd-panel" :title="'验收单号：' + item.ID" :status="item.STATUS | fStatus">
                <div class="wd-panel__body">
                  <p>
                    <span class="label">项目名称：</span>
                    <span class="value">{{item.PROJECTNAME}}</span>
                  </p>
                  <p>
                    <span class="label" v-html="'楼&emsp;&emsp;栋：'"></span>
                    <span class="value">{{item.BUILDING}}</span>
                  </p>
                  <p>
                    <span class="label">付款合同：</span>
                    <span class="value">{{item.PAYNODECODE}}</span>
                  </p>
                  <p>
                    <span class="label">支付节点：</span>
                    <span class="value">{{item.PAYNODE}}</span>
                  </p>
                </div>
                <div class="wd-panel__footer" slot="footer">
                  <span class="ysr">验收人：{{item.REVIEWNAME}}</span>
                  <span class="ysrq">验收日期：{{item.REVIEWDATE | fReviewDate}}</span>
                  <span class="del">
                    <i @click="deleteNode(item.ID)" v-if="item.STATUS === '1'" class="van-icon van-icon-delete"></i>
                  </span>
                </div>
              </van-panel>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 搜索弹框 -->
    <van-popup
      v-model="searchShow"
      position="top"
      :overlay="true">
      <div class="wd-picker__content">
        <van-field
          v-model="form.id"
          label="验收单号："
          placeholder="请输入验收单号"
        />
        <van-field
          v-model="form.projectName"
          label="检查项目："
          placeholder="请输入检查项目"
        />
        <van-field
          v-model="form.contractName"
          label="付款合同："
          placeholder="请输入付款合同"
        />
        <van-field
          v-model="form.payNode"
          label="支付节点："
          placeholder="请输入支付节点"
        />
        <van-field
          v-model="ysr.name"
          label="验收人："
          placeholder="请选择验收人"
          @mousedown="ysr.show = true"
          readonly
        />
        <van-field
          @mousedown="ysrqMousedown"
          v-model="form.reviewDate"
          label="验收日期："
          placeholder="请选择验收日期"
          right-icon="van-icon van-icon-clear"
          @click-right-icon="form.reviewDate = ''"
        />
      </div>
      <div class="van-hairline--top-bottom van-picker__toolbar">
        <button @click="searchShow = false" class="van-picker__cancel">取消</button>
        <button @click="searchConfirm" class="van-picker__confirm">确认</button>
      </div>
    </van-popup>
    <!-- 验收日期选择 -->
    <van-popup
      v-model="ysrq.show"
      position="bottom">
      <van-datetime-picker
        v-model="ysrq.datetime"
        type="date"
        @cancel="ysrq.show = false"
        @confirm="ysrqConfirm" />
    </van-popup>
    <!-- 验收人选择 -->
    <van-action-sheet 
      v-model="ysr.show"
      :actions="ysr.options"
      @select="mYsrSelect" />
  </div>
</template>

<script>
  import searchPopup from '@/components/searchPopup.vue'
  import moment from 'moment'
  import {
    apiGetUser,
    apiDelete,
    apiGetList
  } from '@/api/'

  export default {
    components: {
      'wdSearchPopup': searchPopup
    },
    data() {
      return {
        initing: true,
        assignment: false,
        userID: this.$route.query.userID,
        status: '',
        all: {
          total: Infinity,
          pageNum: 1,
          list: [],
          loading: false
        },
        xz: {
          total: Infinity,
          pageNum: 1,
          list: [],
          loading: false
        },
        spz: {
          total: Infinity,
          pageNum: 1,
          list: [],
          loading: false
        },
        sptg: {
          total: Infinity,
          pageNum: 1,
          list: [],
          loading: false
        },
        btg: {
          total: Infinity,
          pageNum: 1,
          list: [],
          loading: false
        },
        ysrq: {
          show: false,
          datetime: new Date()
        },
        ysr: {
          show: false,
          name: '本人',
          options: [{
            name: '本人',
            value: ''
          },{
            name: '全部',
            value: ''
          }]
        },
        searchShow: false,
        form: {
          pageNum: 1,
          pageRows: 10,
          id: '',
          projectName: '',
          contractName: '',
          payNode: '',
          reviewName: '',
          reviewDate: ''
        }
      }
    },
    created() {
      localStorage.removeItem('userID')
      // 获取用户信息
      apiGetUser(this.userID).then(res => {
        this.ysr.options[0].value = res.data.name
        localStorage.setItem('userName', res.data.name)
      })

      const
        p1 = this.getList(''),
        p2 = this.getList('1'),
        p3 = this.getList('2'),
        p4 = this.getList('3'),
        p5 = this.getList('4')

      Promise.all([p1, p2, p3, p4, p5]).then(() => {
        this.initing = false
      })

      if (this.userID) localStorage.setItem('userID', this.userID)

      this.ysrq.datetime = new Date()
    },
    filters: {
      fReviewDate(v) {
        if (!v) return ''
        return moment(v.time).format('YYYY-MM-DD')
      },
      fStatus(v) {
        switch(v) {
          case '1':
            return '新增'
          break
          case '2':
            return '审批中'
          break
          case '3':
            return '通过'
          break
          case '4':
            return '不通过'
          break
          default:
            return ''
        }
      }
    },
    methods: {
      // 滚动到底部加载
      appendList(ev) {
        const wrap = ev.target
        let cur = null

        switch(this.status) {
          case '1':
            cur = this.xz
          break
          case '2':
            cur = this.spz
          break
          case '3':
            cur = this.sptg
          break
          case '4':
            cur = this.btg
          break
          default:
            cur = this.all
        }

        if (
          wrap.scrollTop + wrap.clientHeight >= wrap.scrollHeight &&
          !cur.loading &&
          !this.assignment &&
          !this.initing
        ) {
          this.getList(null, true)
        }
      },
      // 搜索
      searchConfirm() {
        this.getList(null, false)
        this.searchShow = false
      },
      // 点击列表项
      panelClick(item) {
        var path = ''

        localStorage.setItem('editBaseData', JSON.stringify(item))

        switch(item.STATUS) {
          case '1':
          case '4':
            this.$router.push('/engNodeAcpt/editmain')
          break
          default:
            this.$router.push({
              path: '/engNodeAcpt/detail',
              query: {
                id: item.ID
              }
            })
        }
      },
      // 选中验收人
      mYsrSelect(obj) {
        this.form.reviewName = obj.value
        this.ysr.name = obj.name
        this.ysr.show = false
      },
      // 删除节点
      deleteNode(id) {
        this.$dialog.confirm({
          title: '提示',
          message: '确认删除此节点？'
        }).then(() => {
          apiDelete(this.userID, id).then(res => {
            if (res.code == 2000) {
              this.$toast('删除成功！')
              this.getList(null, false)
            } else {
              this.$toast('删除失败！')
            }
          })
        }).catch(err => {})
      },
      // 获取数据
      getList(status, append) {
        const
          vm = this,
          form = vm.form,
          nStatus = status !== null ? status : vm.status

        var cur = null

        switch(nStatus) {
          case '1':
            cur = vm.xz
          break
          case '2':
            cur = vm.spz
          break
          case '3':
            cur = vm.sptg
          break
          case '4':
            cur = vm.btg
          break
          default:
            cur = vm.all
        }

        if (!append) cur.list = []
        if (cur.pageNum * vm.form.pageRows >= cur.total) return
        vm.form.pageNum = append ? ++cur.pageNum : 1

        cur.loading = true
        var response = apiGetList(vm.userID, nStatus, form)

        response.then(res => {
          cur.total = res.total
          vm.assignment = true
          if (append) {
            cur.list = cur.list.concat(res.data)
          } else {
            cur.list = res.data
          }

          setTimeout(() => {
            vm.assignment = false
          }, 120)
        }).catch(err => {
          vm.$toast('加载失败！')
        }).finally(() => {
          cur.loading = false
        })

        return response
      },
      // 选中验收日期
      ysrqConfirm() {
        this.form.reviewDate = moment(this.ysrq.datetime).format('YYYY-MM-DD')
        this.ysrq.show = false
      },
      // 弹出验收日期
      ysrqMousedown(ev) {
        document.activeElement.blur()
        ev.preventDefault()
        this.ysrq.show = true
      }
    }
  }
</script>